<template>
    <div class="SMSLogs-box">
        <commpVxeTable
         :config="dataTableConfig" 
         :columns="columnsVxe" 
         :formItem="formItem"
         ref="acceptanceRegistrationRef"
         @searchEvent="searchEvent"
         @resetEvent="resetEvent"
         >
        <template v-slot:time_slot>
            <a-range-picker v-model:value="newDateValue"/>
        </template>
        <template v-slot:fjsdx_name="{row}">
            {{ row.fjsdx && row.fzdydx ? row.fjsdx+ ',' + row.fzdydx:
            (row.fjsdx && !row.fzdydx?row.fjsdx : 
            (!row.fjsdx && row.fzdydx?row.fzdydx:''))}}
        </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
            <a-form layout="inline" class="search-form" >
                <a-form-item>
                    <a-button class="blue-btn" type="primary" @click="viewClick(row)">查看</a-button>
                </a-form-item>
                <a-form-item v-if="row.ffszt !=='已发送'">
                    <a-button class="blue-btn" type="primary" @click="modifyClick(row)" >修改</a-button>
                </a-form-item>
                <a-form-item v-if="row.ffszt !=='已发送'">
                    <a-button class="red-btn" type="primary" @click="deleteClick(row)" >删除</a-button>
                </a-form-item>
            </a-form>
        </template>
        </commpVxeTable>
        <modify ref="modifyRef" @success="success" />
    </div>
</template>
<script>
import assessCheckApi from './service/api'
import { deleteUrl } from './service/index'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import blobType from '@/common/blobType'
import modify from './modify.vue'
export default {
    components:{
        commpVxeTable,
        modify
    },
    props:{
        fdxlx:{
            type:String,
            default: () => '',
            required:false
        },
    },
    data(){
        return{
            formItem:[
                {
                    label: '短信内容',
                    model: 'fdxnr',
                },{
                    label: '接收人',
                    model: 'fjsdx',
                },{
                    label: '新建日期',
                    model: 'startTime',
                    slotName:'time_slot'
                },{
                    label: '发送状态',
                    model: 'ffszt',
                    type:'Select',
                    options:[{
                        label:'未发送',
                        value:'未发送'
                    },{
                        label:'已发送',
                        value:'已发送'
                    }]
                }

            ],
            columnsVxe:[
            { 
                type: 'checkbox', 
                width: 60 ,
                fixed: 'left'
            },{
                title: '短信内容', //列头显示文字
                field: 'fdxnr',
            },{
                title: '接收人', //列头显示文字
                field: 'fjsdx',
                slots: {
                    // 使用插槽模板渲染
                    default: 'fjsdx_name',
                },
                // width:100,
            },{
                title: '发送时间',
                field: 'ffssj',
                width:150,
            },{
                title: '发送状态',
                field: 'ffszt',
                width:100,
            },{
                title: '操作',
                field: 'id',
                slots: {
                    // 使用插槽模板渲染
                    default: 'operation_btn',
                },
                fixed: 'right',
                width:260,
            }],
            dataTableConfig:{
                api: assessCheckApi.list,
                rowId: 'id',
                paramet:{
                    fdxlx:this.fdxlx,
                }
            },
            newDateValue:[]
        }
    },
    watch:{

    },
    mounted(){
        
    },
    methods:{
        success(){
            that.$refs.acceptanceRegistrationRef.searchEvent()
        },
        searchEvent(){//搜索
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                startTime:this.newDateValue[0]?moment(this.newDateValue[0]).format('YYYY-MM-DD')+' 00:00:00':'',
                endTime:this.newDateValue[1]?moment(this.newDateValue[1]).format('YYYY-MM-DD')+' 00:00:00':'',
            }
            //console.log(this.dataTableConfig.paramet)
        },
        resetEvent(){//重置
            this.newDateValue = []
            this.dataTableConfig.paramet = {
                ...this.dataTableConfig.paramet,
                startTime:'',
                endTime:'',
            }

        },
        viewClick(row){//查看
            this.$refs.modifyRef.modifyVisible = true
            this.$refs.modifyRef.getData({...row,isView:true})
        },
        modifyClick(row){//修改
            // this.$refs.modifyRef.modifyVisible = true
            // this.$refs.modifyRef.getData({...row,isView:false})
            this.$router.push({path:'/messageManagement/newSMS?id='+row.id})
            // title:'修改短信记录'
            //console.log(this.$router)
        },
        deleteClick(row){//删除
            var that = this
            this.$confirm({
                title:'您确认要删除吗？',
                // icon: createVNode(ExclamationCircleOutlined),
                onOk() {
                    deleteUrl({id:row.id}).then(res=>{
                        if(res.code == 200){
                            that.$message.success('删除成功')
                        }else{
                            that.$message.warning(res.message)
                        }              
                        that.$refs.acceptanceRegistrationRef.searchEvent()
                    })
                },
                
            });
        },
    }
}
</script>
<style>
.red-btn{
    border: 1px solid #ed5565 !important;
    background-color: #ed5565 !important;
}
</style>